<template>
    <wxc-tab-bar :tab-titles="tabTitles"
                 :tab-styles="tabStyles"
                 title-type="icon"
                 @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
        <!--The first page content-->
        <div class="item-container" :style="contentStyle">
            <chat-Bar></chat-Bar>
        </div>
        <!--The second page content-->
        <div class="item-container" :style="contentStyle">
            <tong-bar></tong-bar>
        </div>
        <!-- The th       ird page content-->
        <div class="item-container" :style="contentStyle">
            <my-bar></my-bar>
        </div>
    </wxc-tab-bar>
</template>
<style scoped>
    .item-container {
        width: 750px;
        /*align-items: center;*/
        /*justify-content: center;*/
    }
</style>
<script>
    import { WxcTabBar, Utils } from 'weex-ui';
    var navigator = weex.requireModule('navigator')
    var modal = weex.requireModule('modal')
    import chatBar from './chat.vue'
    import tongBar from './tongxun.vue'
    import myBar from './my.vue'
    import Config from './assets/js/config.js'

    export default {
        components: { WxcTabBar, myBar, chatBar, tongBar },
        data: () => ({
            tabTitles: Config.tabTitles,
            tabStyles: Config.tabStyles
        }),
        created () {
            const tabPageHeight = Utils.env.getPageHeight();
            // If the page doesn't have a navigation bar
            // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
            const { tabStyles } = this;
            this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
        },
        methods: {
            wxcTabBarCurrentTabSelected (e) {
                const index = e.page;
                // console.log(index);
            }
        }
    };
</script>